<#include "_inc/_layout.html"/>
<#macro script>
var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true
    });
</#macro> 
<@layout>
<div class="container">
    <div class="row">
        <aside class="col-sm-3 col-md-2 jp-common display-none-768">
              <section class="side-tag">
                  <h5 class="side-left-head">feature tag</h5>
                  <dl class="dl-horizontal">
                      <dt><i class="fa fa-mobile fa-2x"></i></dt>
                      <dd>技术频道(8)</dd>
                      <dt><i class="fa fa-home fa-lg"></i></dt>
                      <dd>技术(3)</dd>
                      <dt><i></i></dt>
                      <dd>...</dd>
                      <dt><i class="fa fa-key fa-lg"></i></dt>
                      <dd>创业库</dd>
                      <dt><i class="fa fa-money fa-lg"></i></dt>
                      <dd>开店</dd>
                      <dt><i class="fa fa-camera fa-lg"></i></dt>
                      <dd>起步(0)</dd>
                      <dt><i class="fa fa-rocket fa-lg"></i></dt>
                      <dd>创业营销</dd>
                      <dt><i class="fa fa-graduation-cap fa-lg"></i></dt>
                      <dd>创业成长(9)</dd>
                      <dt><i class="fa fa-tablet fa-lg"></i></dt>
                      <dd>融资</dd>
                  </dl>
              </section>
            <section class="side-tag">
                <p class="text-center">微信公众平台：搜索 "jpress" 或者扫描下面的二维码</p>
                <img class="img-thumbnail"  src="imgs/photo3.jpg"/>
            </section>
        </aside>
        <section class="col-xs-12 col-sm-9 col-md-7 ">
            <article class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="jp-art-main">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                	 <@jp_contents  module="article" flag="hot">
           							 <#list contents as content>
                                    <div class="swiper-slide">
                                        <img class="jp-width100 jp-img-maxh" src="${content.thumbnail!}"/>
                                        <div class="jp-art-sub">
                                            <div class="row jp-art-info">
                                                <div class="jp-right">
                                                    <img  src="imgs/photo4.jpg">
                                                </div>
                                                 ${content.summary!}
                                            </div>
                                        </div>
                                     </div>
                                     </#list>
            						</@jp_contents>
                                </div>
                                <!-- Add Pagination -->
                                <div class="swiper-pagination"></div>
                                <!-- Add Arrows -->
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </article>

            <@jp_contents  module="article">
            <#list contents as content>
            <article class="content">
                <div class="row">
                    <div class="col-xs-4"> 
                    <#if content.thumbnail ??>
                    	<img class="jp-width100" src="${content.thumbnail!}"/>
                    <#else>
                    	<img class="jp-width100" src="${content.firstImage!}"/>
                    </#if>
                    </div>
                    <div class="col-xs-8 ">
                        <h5 class="jp-margin-top"><a href="${content.url}">${content.title}</a></h5>
                        <h6>By<span class="content-author">${content.username!}</span>
                            <span class="release-time">2016-02-03</span>
                        </h6>
                        <p class="display-none-768 content-detail">
                         ${content.summary!}
                        </p>
                        <p class="content-footer">
                            <span class="font-weight6"><a><i class="fa fa-link"></i>${content.tagsAsUrl!}</a></span>
                            <span class="jp-right display-none-768"><i class="fa fa-thumbs-o-up"></i>6</span>
                            <span class="jp-right display-none-768"><i class="fa fa-comment-o"></i>5</span>
                        </p>
                    </div>
                </div>
            </article>
            </#list>
            </@jp_contents>
            
        </section>
        <aside class="col-md-3 display-none-992 jp-common main-side">
            <section class="side-tag">
                <p> <img class="jp-width100" src="imgs/photo3.jpg">  </p>
                <p>公交总队刑侦支队提供的工作证明显示，接到电话后，各级领导高度重视</p>
            </section>
            <section class="side-tag">
                <h5 class=" jp-margin-top">最新资讯 <span class="jp-right jp-color-org"><i class="fa fa-ellipsis-h fa-lg"></i> </span></h5>
                <div class="jp-width100 side-header"></div>
                <ul class="list-unstyled">
                    <li><a>公交总队刑侦支队提供的工作证明显</a></li>
                    <li><a>公交总队刑侦支队提供的工作证明显</a></li>
                    <li><a>公交总队刑侦支队提供的工作证明显</a></li>
                    <li><a>公交总队刑侦支队提供的工作证明显</a></li>
                    <li><a>公交总队刑侦支队提供的工作证明显</a></li>
                    <li><a>公交总队刑侦支队提供的工作证明显</a></li>
                </ul>
            </section>
            <section class="side-tag">
                <h5 class=" jp-margin-top">应用控<span class="jp-right jp-color-org"><i class="fa fa-ellipsis-h fa-lg "></i> </span></h5>
                <div class="jp-width100 side-header"></div>
                <ul class="list-unstyled">
                    <li ><a><img class="jp-left user-image" src="imgs/user160.jpg"/>
                        公交总队刑侦支队提供的侦支队提供的工工作证明显</a></li>
                    <li ><a><img class="jp-left user-image" src="imgs/user160.jpg"/>
                        公交总队刑侦支队提供的侦支队提供的工工作证明显</a></li>
                    <li><a><img class="jp-left user-image" src="imgs/user160.jpg"/>
                        公交总队刑侦支队提供的侦支队提供的工工作证明显</a></li>
                    <li ><a><img class="jp-left user-image" src="imgs/user160.jpg"/>
                        公交总队刑侦支队提供的侦支队提供的工工作证明显</a></li>

                </ul>
            </section>
            <section class="side-tag">
                <h5 class=" jp-margin-top">热图文<span class="jp-right jp-color-org"><i class="fa fa-ellipsis-h fa-lg"></i> </span></h5>
                <div class="jp-width100 side-header"></div>
                <p> <img class="jp-width100" src="imgs/photo3.jpg">  </p>
                <p>公交总队刑侦支队提供的工作证明显示，接到电话后，各级领导高度重视</p>
                <div class="jp-width100 side-footer"></div>
                <p> <img class="jp-width100" src="imgs/photo3.jpg">  </p>
                <p>公交总队刑侦支队提供的工作证明显示，接到电话后，各级领导高度重视</p>
                <div class="jp-width100 side-footer"></div>
                <p> <img class="jp-width100" src="imgs/photo3.jpg">  </p>
                <p>公交总队刑侦支队提供的工作证明显示，接到电话后，各级领导高度重视</p>
                <div class="jp-width100 side-footer"></div>
                <p> <img class="jp-width100" src="imgs/photo3.jpg">  </p>
                <p>公交总队刑侦支队提供的工作证明显示，接到电话后，各级领导高度重视</p>

            </section>
            <section class="side-tag">
                <h5 class=" jp-margin-top">热门会员<span class="jp-right jp-color-org"><i class="fa fa-ellipsis-h fa-lg"></i> </span></h5>
                <div class="jp-width100 side-header"></div>
                <ul class="list-inline member">
                    <li ><a><img class="jp-left user-image" src="imgs/user160.jpg"/></a></li>
                    <li ><a><img class="jp-left user-image" src="imgs/user160.jpg"/></a></li>
                    <li><a><img class="jp-left user-image" src="imgs/user160.jpg"/></a></li>
                    <li ><a><img class="jp-left user-image" src="imgs/user160.jpg"/></a></li>
                </ul>
            </section>
        </aside>

    </div>
</div>
<section class="comment">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3 jp-common">
                <div class="comment-head comment-height text-center"><h4 class="comment-head-com">精彩推荐</h4></div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 jp-common">
                <div class="comment-content comment-height">
                <h5 class="comment-content-title"><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></h5>
                <h6><span class="content-author">大宏</span>
                    <span class="release-time jp-right">2016-02-03</span>
                </h6>
                    </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 jp-common">
                <div class="comment-content comment-height">
                    <h5 class="comment-content-title"><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></h5>
                    <h6><span class="content-author">大宏</span>
                        <span class="release-time jp-right">2016-02-03</span>
                    </h6>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 jp-common">
                <div class="comment-content comment-height">
                    <h5 class="comment-content-title"><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></h5>
                    <h6><span class="content-author">大宏</span>
                        <span class="release-time jp-right">2016-02-03</span>
                    </h6>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="container-fluid mix-link">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h4 class="text-center display-none-768">专题</h4>
                <ul>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                </ul>
            </div>
            <div class="col-sm-4">
                <h4 class="text-center display-none-768">专题</h4>
                <ul>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                </ul>
            </div>
            <div class="col-sm-4">
                <h4 class="text-center display-none-768">专题</h4>
                <ul>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                    <li><a>民航专家张起淮：“我判断，这次飞机的客观因素</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>
<section class="container-fluid friend-link">

    <div class="container">
        <div class="row">
            <h4>友情链接</h4>
            <div class="jp-width100 side-header"></div>
            <ul class="list-inline"><li><a>装修秘笈</a></li><li><a>装修秘笈</a></li><li><a>装修秘笈</a></li><li><a>装修秘笈</a></li></ul>

        </div>
    </div>
</section>
</@layout>